<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车全选</title>

    <style>
        .cartContainer {
            width: 400px;
            margin: 20px auto;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 5px;
        }

        .cartHeader,
        .cartItem {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        .cartHeader {
            font-weight: bold;
            background-color: #f5f5f5;
        }

        .checkbox {
            width: 50px;
            text-align: center;
        }

        .name {
            width: 250px;
        }

        .price {
            width: 100px;
            text-align: right;
        }
    </style>
</head>

<body>
    <div class="cartContainer">
        <div class="cartHeader">
            <div class="checkbox">
                <input type="checkbox" class="selectAll">
            </div>
            <div class="name">商品名称</div>
            <div class="price">价格</div>
        </div>

        <div class="cartItem">
            <div class="checkbox">
                <input type="checkbox" class="itemCheckbox">
            </div>
            <div class="name">iPhone 16</div>
            <div class="price">¥7999</div>
        </div>

        <div class="cartItem">
            <div class="checkbox">
                <input type="checkbox" class="itemCheckbox">
            </div>
            <div class="name">华为 mate60</div>
            <div class="price">¥7999</div>
        </div>

        <div class="cartItem">
            <div class="checkbox">
                <input type="checkbox" class="itemCheckbox">
            </div>
            <div class="name">AirPods Pro</div>
            <div class="price">¥1499</div>
        </div>

        <div class="cartItem">
            <div class="checkbox">
                <input type="checkbox" class="itemCheckbox">
            </div>
            <div class="name">MacBook Pro</div>
            <div class="price">¥12999</div>
        </div>
    </div>
</body>
<script>
    let selectAll = document.querySelector('.selectAll');
    let itemCheckboxes = document.querySelectorAll('.itemCheckbox');

    selectAll.addEventListener('change', function () {
        for (let i = 0; i < itemCheckboxes.length; i++) {
            itemCheckboxes[i].checked = this.checked;
        }
    });

    for (let i = 0; i < itemCheckboxes.length; i++) {
        itemCheckboxes[i].addEventListener('change', function () {
            let allChecked = true;
            for (let j = 0; j < itemCheckboxes.length; j++) {
                if (!itemCheckboxes[j].checked) {
                    allChecked = false;
                    break;
                }
            }
            selectAll.checked = allChecked;
        });
    }
</script>

</html>